<template>
  <el-menu-item index="2" @click="handleClick">视频监控</el-menu-item>
 <!-- popup -->
  <div id="popup"
   class="ol-popup">
      <div class="vedio-head">摄像头: {{Cameranum}}
        <a href="javascript:void(0)" id="popup-closer" class="ol-popup-closer" @click="handleClose"></a>
      </div>
      <div class="vedio-box">
        <div class="position">
          <h2 class="position-title">位置: </h2>
          <div class="position-info">{{location}}</div>
        </div>
        <div class="vedio-info">
          <!-- 视频静音+自动播放+循环播放+无控制器 -->
          <video id="vedio" muted autoplay="autoplay" loop="loop">
            <source src="@/images/VideoSurveillance.mp4" type="video/mp4"></source>
          </video>
        </div>
      </div>
    </div>
</template> 

<script setup>
import {ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { Query } from "@/api/mapgis-api/Query";

const poptrigger = ref(false); // 用于触发弹出窗的元素  
const location = ref(""); // 用于存储点击位置的位置信息  
const Cameranum = ref(""); // 相机编号
/* 声明变量 */
let map;
let popup;
// =========================点击菜单项弹出弹框======================
const handleClick = () => {    
  poptrigger.value = true; // 显示弹窗  
}; 
/* 关闭弹窗 */
const handleClose = () => {
  popup.setPosition(null); 
  poptrigger.value = false;
}
// ========================点击要素进行查询=========================
onMounted(() => {
/* ===================map,popup=============== */
  map = proxy.$map;
    /* 创建popup容器 */
  var container = document.getElementById('popup');
  popup = new ol.Overlay({
        element: container,
        autoPan: true,
        positioning: 'top-center',
        stopEvent: true,
        autoPanAnimation: {
            duration: 250,
        },
   })
  map.addOverlay(popup);

  map.on("click", evt => {
    let position = evt.coordinate;
    let service = {
                docName: "guanggu",
                layerId: 3
            }
    Query.queryByPnt({
        position,
        service,
        success: async (features) => {
        console.log(features)
        // const firstFeature = features[0]
        if (features&&poptrigger.value) {  
          console.log(features)
       features.forEach(firstFeature => {  
  
        const values = firstFeature.get("values_");  
        // 处理逻辑，显示或记录每个特征的值  
        location.value = values.位置
        Cameranum.value= values.编号
        
        const properties = firstFeature.getProperties();  
        console.log(properties);  
        const pos = properties.geometry.flatCoordinates// 从属性对象中获取  
        popup.setPosition([pos[0],pos[1]] );
    });  
}}
 })
});
});

</script>

<style scoped>
.vedio-head{
     display: flex;
     justify-content: space-between;
     align-items: center;
    padding: 5px;
    width: 320px;
    color: #fff;
    font-size: 14px;
    background-color: #2196f3;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.vedio-box{
    /* width: 300px; */
    padding: 15px 15px;
    background-color: #fff;
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
}
.position{
    display: flex;
}
.position-title{
    padding: 5px;
    font-size: 15px;
    flex: 0.6;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
.position-info{
    font-size: 14px;
    padding: 5px;
    flex: 1;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.vedio-info{
  /* 添加摄像头影像后可删除高度，由影像撑开 */
    height: 200px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}
#vedio{
  /* 可设置摄像头影像宽高 */
    margin: 6px;
}

.ol-popup {
      box-sizing: border-box;
      position: absolute;
      background-color: white;
      -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      border-radius: 10px;
      border: 1px solid #cccccc;
      /* bottom: 22px; */
      left: 50%;
      transform: translateX(-50%);
      min-width: 100px;
      z-index: 100;
      padding: 0;
    }

    .ol-popup:after,
    .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 50%;
      transform: translateX(-50%);
    }

    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 50%;
      transform: translateX(-50%);
    }

    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
    }

    .ol-popup-closer:after {
      content: "✖";
    }

    video{
      width:100%;
      height:100%;
    }
</style>
